<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="stylesheet" href="./css/home.css" type="text/css">
    <link rel="stylesheet" href="./css/common.css" type="text/css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1898033_z4921c3gha.css">
</head>
<body>
    <div class="container">
        <div class="navigation">
            <div class="nav-box">
                <a href="#aboutme" class="btn btn1">About me</a>
                <a href="#mylove" class="btn btn2">My hobby</a>
                <a href="#mywork" class="btn btn3">My work</a>
                <a href="#myparters" class="btn btn4">My partner</a>
                <a href="#contractme" class="btn btn5">Contract me</a>
            </div>
        </div>
        <div class = "card">
            <div class="card-header">
                <div class="image"></div>
                <h3 class="name">zhanghuan</h3>
            </div>
            <div class="card-content">
                <p>大家好，欢迎来到程序员的世界</p>
                <ul>
                    <li><a href="https://im.qq.com/"><i class="iconfont icon-qq"></i></a></li>
                    <li><a href="https://weibo.com/"><i class="iconfont icon-icon-test"></i></a></li>
                    <li><a href="https://github.com/"><i class="iconfont icon-icon-test1"></i></a></li>
                    <li><a href="https://wx.qq.com/"><i class="iconfont icon-icon-test2"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="mian">
        <!-- 关于我 -->
        <div class="aboutme" id="aboutme">
            <div class="part-content">
                <div class="title"><span><i class="iconfont icon-biaoqian"></i>&nbsp;AboutMe</span></div>
                <div class="me">
                    <div class="me-left">
                        <span>基本信息</span>
                        <ul>
                            <li>姓名：章欢</li>
                            <li>学校：武汉工程大学</li>
                            <li>专业：软件工程</li>
                            <li>方向：全栈工程师</li>
                            <li>学历：本科</li>
                            <li>籍贯：安徽舒城</li>
                            <li>出生年月：1997/10/30</li>
                        </ul>
                    </div>
                    <div class="me-right">
                        <span>基本技能</span>
                        <ul>
                            <li>熟练掌握HTML、CSS、JavaScript、jQuery等前端技术</li>
                            <li>熟练使用bootstrap和Vue前端框架</li>
                            <li>熟悉微信小程序的开发</li>
                            <li>熟悉掌握Java和MySQL</li>
                            <li>熟悉掌握springboot框架</li>
                            <li>会Photoshop简单使用</li>
                            <li>熟练使用GitHub和码云来托管自己的项目</li>
                            <li>能够在linux环境下编程</li>
                            <li>具有较强的学习能力和良好的技术水平，以及较强的责任心。</li>
                        </ul>

                    </div>
                </div>
            </div>
        </div>
        <!-- 我的爱好 -->
        <div class="mylove" id="mylove">
            <div class="part-content">
                <div class="title"><span><i class="iconfont icon-biaoqian"></i>&nbsp;MyHobby</span></div>
                <div class="love">
                    <div class="love-box">
                        <img src="./images/love1.jpg">
                        <p>
                            程序员的问题是，你无法知道他在做什么，直到为时已晚。—— 西摩·克雷
                        </p>
                    </div>
                    <div class="love-box">
                        <img src="./images/love3.jpg">
                        <p>读史使人明智，读诗使人灵秀，数学使人周密，科学使人深刻，伦理学使人庄重，逻辑修辞使人善辩，凡有所学，皆成性格。
                            ——（英国）培根</p>
                    </div>
                    <div class="love-box">
                        <img src="./images/love5.jpg">
                        <p>生活的苦难压不垮我.我心中的欢乐不是我自己的,我把欢乐注进音乐,为的是让全世界感到欢乐.——莫扎特</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 我的作品 -->
        <div class="mywork" id="mywork">
            <div class="part-content">
                <div class="title"><span><i class="iconfont icon-biaoqian"></i>&nbsp;MyWork</span></div>
                <div class="works">
                    <div class="work-box">
                        <div class="work-img">
                            <a href="百度页面/index.html"><img src="./images/1.png"></a>
                        </div>
                        <p></p>
                    </div>
                    <div class="work-box">
                        <div class="work-img">
                            <a href="家居医生页面2/index.html"><img src="./images/2.png"></a>
                        </div>
                        <p></p>
                    </div>
                    <div class="work-box">
                        <div class="work-img">
                            <a href="生活家实木地板评测/index.html"><img src="./images/3.png"></a>
                        </div>
                        <p></p>
                    </div>
                    <div class="work-box">
                        <div class="work-img">
                            <a href="远大页面/index.html"><img src="./images/4.png"></a>
                        </div>
                        <p></p>
                    </div>
                    <div class="work-box">
                        <div class="work-img">
                            <a href="小米商城/index.html"><img src="./images/5.png"></a>
                        </div>
                        <p></p>
                    </div>
                    <div class="work-box">
                        <div class="work-img">
                            <a href="木兮地板/index.html"><img src="./images/6.png"></a>
                        </div>
                        <p></p>
                    </div>
                    <div class="work-box">
                        <div class="work-img">
                            <a href="用户中心页面/index.html"><img src="./images/7.png"></a>
                        </div>
                        <p></p>
                    </div>
                    <div class="work-box">
                        <div class="work-img">
                            <a href="小米登录页面2/index.html"><img src="./images/9.png"></a>
                        </div>
                        <p></p>
                    </div>
                   
                </div>
            </div>    
        </div>
        <!-- 我的伙伴 -->
        <div class="myparters" id="myparters">
            <div class="part-content">
                <div class="title"><span><i class="iconfont icon-biaoqian"></i>&nbsp;MyParter</span></div>
            <div class="parters">
                <div class="box">
                    <div class="imgBx">
                        <img src ="images/touxian2.jpg">
                    </div>
                    <div class="content">
                        <h2>邓丽娟</h2>
                        <p>   数媒01
                        </p>
                        <a href="#">Read More</a>
                    </div>
                </div>
                <div class="box">
                    <div class="imgBx">
                        <img src ="images/touxian3.jpeg">
                    </div>
                    <div class="content">
                        <h2>王磊</h2>
                        <p>软工02
                        </p>
                        <a href="#">Read More</a>
                    </div>
                </div>
                <div class="box">
                    <div class="imgBx">
                        <img src ="images/touxiang1.jpeg">
                    </div>
                    <div class="content">
                        <h2>张梦学</h2>
                        <p>数媒01
                        </p>
                        <a href="#">Read More</a>
                    </div>
                </div>
                <div class="box">
                    <div class="imgBx">
                        <img src ="./images/touxian4.jpeg">
                    </div>
                    <div class="content">
                        <h2>万若涵</h2>
                        <p> 数媒01
                        </p>
                        <a href="#">Read More</a>
                    </div>
                </div>
            </div>
            </div>
            
        </div>
        <!-- 我的联系方式 -->
        <div class="contractme" id="contractme">
            <div class="part-content">
                <div class="title"><span><i class="iconfont icon-biaoqian"></i>&nbsp;ContractMe</span></div>
                <div class="contact">
                    <div class="contact-left">
                        <span>联系方式</span>
                        <ul>
                            <li>地址：江苏省苏州市相城区</li>
                            <li>电话：15212816720</li>
                            <li>QQ: &nbsp;&nbsp;576809570</li>
                            <li>微信：zh2410545976</li>
                            <li>微博：看山不是山</li>   
                            <li>网站：https://zhangzhonghuan.github.io/</li>   
                        </ul>

                    </div>
                    <div class="line"></div>
                    <div class="contact-right">
                        <span>你想对我说</span>
                        <textarea  placeholder="说点什么..."></textarea>
                        <button>确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="scroll">
        <a href=""><i class="iconfont icon-home"></i></a>
        <a href=""><i class="iconfont icon-huidaodingbu"></i></a>
    </div>  
</body>
</html>